<template>
  <div class="container">
    <ul>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/telTag.png"/>
        <input type="tel" name="account" placeholder="请输入手机号码" v-model="tel">
        <!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="telBtn">获取手机码号</button> -->
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/codeTag.png"/>
        <input type="text" name="yan" placeholder="请输入验证码" v-model="yan">
        <div @click="flag &&getYan()" :class="{noclick:flag==false}">获取验证码<span v-if="time!=''">{{time}}s</span></div>
      </li>
      <!-- <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/passwordTag.png"/>
        <input type="password" name="password" placeholder="请输入密码" v-model="password">
      </li> -->
      <div class="details">
        <div class="login" @click="register">确认绑定</div>
        <!-- <div class="goLogin"><navigator url="/pages/login/main" open-type="redirect">已有账号,立即登陆</navigator></div> -->
      </div>
    </ul>
  </div>
</template>

<script>


export default {
  data () {
    return {
      tel:"",
      yan:"",
      password:"",
      time:"",
      timeOut:"",
      interval:'',
      flag:true
    }
  },

  components: {
  },

  methods: {

    async getYan(){
	  let res=await this.$api.sendVerificationCode({phone:this.tel})
      uni.showToast({
      	icon:'none',
		title:res.data.message
      })
     
      this.timeOut=setTimeout(()=>{
		uni.showToast({
			icon:'none',
				title:'请重新发送验证信息'
		})
      },60000)
      if(res.data.level=='success'){
         this.time=60
        this.flag=false
        this.interval=setInterval(() => {
        this.time--;
        if(this.time==0){
          this.flag=true
          clearInterval(this.interval)
        }
      }, 1000);
      }
    },
    async register(){
      var userToken=uni.getStorageSync('userToken') ;
	  let params={phone:this.tel,verify_phone:this.yan,user_token:userToken};
	  let res=await this.$api.bindingPhone(params);
      if(res.data.level=="success"){
  //       uni.switchTab({
		// 	url:'/pages/index/index'
		// })
		this.toLastPage()
      }else{
        uni.showToast({
        	icon:'none',
			title:res.data.message
        })
      }
    },
    getPhoneNumber(e){
      const _this=this
       uni.checkSession({
        async fail(){
            uni.login({
              success: async function(e){
                const code=e.code;
                var userToken=uni.getStorageSync('userToken') 
                const res=await _this.$request.postData('/auth/getWeChatPhone',{
                  user_token:userToken,
                  iv:e.mp.detail.iv,
                  encryptedData:e.mp.detail.encryptedData,
                  code:code
                })
                if(res.data.level=='success'){
                  _this.tel=JSON.parse(res.data.data).phoneNumber
                }else{
                  uni.showToast({
                  	icon:'none',
                  	title:res.data.message
                  })
                }
                
              },
              fail(e){
                console.log(e);
              }
            })
        },
        success:async function(){
          var userToken=uni.getStorageSync('userToken') 
          const res=await _this.$request.postData('/auth/getWeChatPhone',{
            user_token:userToken,
            iv:e.mp.detail.iv,
            encryptedData:e.mp.detail.encryptedData
          })
          if(res.data.level=='success'){
              _this.tel=JSON.parse(res.data.data).phoneNumber
            }else{
              uni.showToast({
              	icon:'none',
              	title:res.data.message
              })
            }
        }
      })
      
    },
	toLastPage(){
		//返回授权前的页面
		let pageInfo=this.$bus.$data.historyUrl
		if(
		pageInfo.path!=='pages/index/index'&&
		pageInfo.path!== 'pages/circlebar/circlebar' &&
		pageInfo.path!== 'pages/notice/notice' &&
		pageInfo.path!== 'pages/person/person'
		){
			
			let options=null
			if(pageInfo.options){
				options=this.$currency.toQueryString(pageInfo.options)
			}
			uni.redirectTo({
				url: `/${pageInfo.path}?${options}`
			});
		}else{
			uni.switchTab({
				url:`/${pageInfo.path}`
			})
		}
		
	},
  },
  onUnload(){
    clearTimeout(this.timeOut)
    clearInterval(this.interval)
  }
}
</script>

<style scoped>
.container{color: #666666;background-color: #F8F8FB;margin-top: 20rpx;}
ul li{width: 100%;height: 52px;display: flex;justify-content: row;align-items:center;border-bottom:1px solid #F8F8FB;margin-bottom: 1px;background-color: #fff;}
ul li img{width: 26px;height: 26px;margin-top: 12px;margin-left: 20px;}
ul li div{width: 120px;height: 40px;margin-top: 6px;color: #666;border: 1px solid rgba(0,0,0,0.2);font-size: 15px;line-height: 40px;text-align: center;border-radius: 5px;font-weight: 600;}
ul li:nth-of-type(2) input{width: 200px;}
ul li input{width: 250px;height: 26px;margin-top: 12px;margin-left: 20px;}
ul li:nth-of-type(4){margin-bottom: 0px;}
.tip{width: 100%;height: 52px;}
.tip input{margin-left: 20px;}
.tip span{line-height: 52px;}
.tip span:nth-of-type(2){float: right;margin-right: 20px;}
.login{
	width: 340px;
	margin-left: 17.5px;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	color:#000;
	font-size: 20px;
	text-align: center;
	background: #FFE226;
	font-weight: 500;
	
	}
.goLogin{width: 140px;height: 40px;margin: 10px auto;text-align: center;line-height: 40px;color: #0180cf;font-size: 15px;}
.details{padding-top: 10px;background-color: #fff;}

.noclick{
  background: #eee;
}

.telBtn{
  width: 140px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color:#666;
  background: #fff;
}
</style>